<template>
	<view class="content">
		<view class="big_item" :class="{ 'up-animation': isAnimate }" v-for="item in logList" :key="item.id">
			<view class="help-log-list-wrap">
				<view class="item">恭喜{{ item.create_name }} 成功提现100元</view>
			</view>
		</view>
	</view>
	
</template>

<script>
export default {
	name: 'suspension',
	data() {
		return {
			//是否开启动画
			isAnimate: false,
			//记录列表
			logList: [
				{ create_name: '张**' },
				{ create_name: '李*' },
				{ create_name: '李**' },
				{ create_name: '毛**' },
				{ create_name: '赵**' },
				{ create_name: '王**' },
				{ create_name: '黄**' }
			],
			//定时器
			timer: null
		};
	},
	mounted() {
		this.startMessageTimer();
	},
	methods: {
		//开启消息轮询定时器
		startMessageTimer() {
			//列表数据少于三条就不滚动了
			if (this.timer || !this.logList.length || this.logList.length <= 3) {
				return;
			}
			//每隔3秒钟滚动一次
			this.timer = setInterval(() => {
				//1.开启动画之后，这个时候列表就向上滚动了
				//2.在等待每次滚动时间差不多到的时候，把最前面的数据放到列表最后，这样就能循环滚动了
				//3.最后再关闭动画，等待下次再开启动画，这样就形成了循环滚动的效果了
				this.isAnimate = true;
				setTimeout(() => {
					//操作记录列表
					let firstItem = this.logList.shift();
					//添加到最后
					this.logList.push(firstItem);
					//关闭动画
					this.isAnimate = false;
				}, 2000);
			}, 3000);
		}
	}
};
</script>

<style lang="scss" scoped>
	.content{
		position: fixed;
		top: 60rpx;
		left: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		height: 120rpx;
		.big_item{
			height: 40rpx;
			margin-bottom: 30rpx;
			border-radius: 50rpx;
			line-height: 40rpx;
			
			//向上滚动1次的动画，每次滚动需要1秒钟
			.help-log-list-wrap {
				overflow: hidden;
				text-overflow: ellipsis;
				height: 40rpx;
				.item {
					height: 40rpx;
					background-color: #df3537;
					color: #fff;
					font-size: 24rpx;
					border-radius: 50rpx;
					padding-left: 10rpx;
					padding-right: 10rpx;
					line-height: 40rpx;
					// opacity: 0.8;
					
				}
				// .up-animation {
				// 	animation-name: upAni;
				// 	animation-duration: 3s;
				// 	border-radius: 8rpx;
				// 	@keyframes upAni {
				// 		0% {
				// 			transform: translateY(0rpx);
				// 			-webkit-transform: translateY(0rpx);
				// 		}
				// 		100% {
				// 			transform: translateY(-60rpx);
				// 			-webkit-transform: translateY(-60rpx);
				// 		}
				// 	}
				// }
			}
		}
		.up-animation {
			animation-name: upAni;
			animation-duration: 2s;
			@keyframes upAni {
				0% {
					transform: translateY(0rpx);
					-webkit-transform: translateY(0rpx);
				}
				100% {
					transform: translateY(-70rpx);
					-webkit-transform: translateY(-70rpx);
				}
			}
		}
	}

</style>
